<template>
  <div class="container">
    <div class="warp">
        <div class="header">
            <ul>
                <li @click="getSingers()">全部</li>
                <li v-for="item in headerTitle" :key="item.id" @click="handlepush(item.id)">{{item.name}}</li>
            </ul>
        </div>

        <div>
            <Singer @getSingerInfo="getSingerInfo" :dataBase="Singers"></Singer>
        </div>
    </div>
  </div>
</template>

<script>
import Singer from '@/components/Front/Singer/index.vue'
import {mapMutations} from 'vuex'
export default {
    components:{
        Singer
    },
    data(){
        return {
            headerTitle:[],
            Singers:[]
        }
    },
    methods:{
        ...mapMutations('editfo',['changeDatas']),
        async getSingers(){
            const res = await this.$axios.get("Singer/GetAll")
            this.Singers = res
        },
        getSingerInfo(val){
            this.changeDatas(val)
            this.$router.push('/layout/singerdetial')
        },
        async getTitle(){
            const res = await this.$axios.post(`tagMap/SelectByTagType?targetType=1`)
            console.log(res)
            this.headerTitle = res
        },
        async handlepush(val){
            if(val == null){
                return null
            }
            const res = await this.$axios.post(`tagMap/SelectMainTag?targetType=1&tagId=${val}`)
            const ase = await this.$axios.post(`Singer/getSingerLists?ids=${res}`)
            this.Singers = ase
        }
    },
    created(){
        this.getTitle()
        this.getSingers()
    }
}
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
ul{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    margin-top: 90px;
    .warp{
        margin: 0 150px;
        background-color: #eee;
    }
}
.warp .header{
    height: 50px;
    width: 100%;
    ul{
        display: flex;
        text-decoration: none;
        flex-wrap: wrap;
        height: 100%;
        li{
            margin-left: 20px;
            width: 60px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            font-weight: 600;
            &:hover{
                cursor: pointer;
                border-bottom: 2px solid #00FF7F;
                color: #00FF7F;
            }
        }
    }
}
</style>